<template>
  <div id="Postlog">
      <el-form
        :model="journalForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="top" 
      >
        <el-form-item label="日志标题" prop="title">
          <el-input v-model="journalForm.title" clearable placeholder="上传文件将自动获取标题"></el-input>
        </el-form-item>
        <el-form-item label="日志描述" prop="des">
          <el-input v-model="journalForm.des"  type="textarea"  placeholder="输入文章描述"></el-input>
        </el-form-item>
        <el-form-item label="文件上传">
          <el-upload
            class="upload-demo"
            drag
            :action="baseURL+'/admin/journal/uploadMd'"
            :with-credentials="true" 
            :auto-upload="false"  
            ref="mdUpload"
            :on-success="mdSuccess"
            :limit="1"
            :on-change="fileChange"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">只能上传 md 文件</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="封面图上传">
          <el-upload
            class="upload-demo"
            :action="baseURL+'/admin/journal/uploadCover'"
            ref="coverUpload"
            :with-credentials="true"
            :auto-upload="false"
            :limit="3"
            multiple
            list-type="picture"
            :on-success="coverSuccess"
            :on-change="coverChange"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-button type="success" @click="uploadJournal">发表日志</el-button>
      </el-form>
  </div>
</template>
 
<script>
export default {
  name: 'Postlog',
  data(){
    return{
      // 表单数据
      journalForm:{
        // 文章标题
        title:"",
        // 文章表述
        des:""
      },
      // 规则验证
      rules:{
        title:[
          {required:true,trigger:"blur"}
        ],
        des:[
          {required:true,trigger:"blur"}
        ]

      },
      // cover信息
      cover:[], 
      // md文件信息
      mdInfo:""
    }
  },
  methods:{
    // 上传文件状态改变时的判断
    fileChange(file,fileList){
      // 判断状态
      if(file.status!=="ready") return
      // 判断是否md文件
      if(/^(.+)\.md$/.test(file.name)){
        if(!this.journalForm.title){
          this.journalForm.title = RegExp.$1
        }
      }else{
        this.$message.warning("只能上传 .md 文件")
        fileList.pop()
      }
    },
    // 封面上传时触发
    coverChange(file,fileList){
      const isJPG = /^image\/(jpeg|png)$/.test(file.raw.type)
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.warning('上传封面图片只能是 JPG/PNG 格式!');
          fileList.pop()
        }
        if (!isLt2M) {
          this.$message.warning('上传封面图片大小不能超过 1MB!');
          fileList.pop()
        }
        return isJPG && isLt2M;
    },
    // 上传日志文件
    uploadJournal(){
      // 上传md文件
      this.$refs.mdUpload.submit()
    },
    // md文件上传成功
    mdSuccess(res,file){
      if(res.code) return this.$message.warning(res.mes)
      // md文件信息
      this.mdInfo = res.data
      // 上传cover文件
      this.$refs.coverUpload.submit()
    },
    // 封面图上传成功
    coverSuccess(res,file){
      if(res.code) return this.$message.warning(res.mes)
      // 上传cover成功
      this.cover.push(res.data)
      if(this.cover.length === 3){
        // 发表日志
        this.submitJournal()
      }
    },
    // 发表日志
    submitJournal(){
      // 验证表单
      this.$refs.ruleForm.validate(async v=>{
        if(!v) return false
        // 发送数据
        let {data} = await this.$axios.post("/admin/journal/uploadJournal",{
          title:this.journalForm.title,
          des:this.journalForm.des,
          md:this.mdInfo,
          cover:this.cover
        })
        if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
        // 清理表单数据
        this.$refs.ruleForm.resetFields()
        // 清空上传图片列表
        this.$refs.coverUpload.clearFiles()
        // 清空上传文件列表
        this.$refs.mdUpload.clearFiles()
      })
    }
  }
}
</script>

<style scoped lang='less'>
</style>